Page({
  data: {
    images: [
      { src: '/images/img1.png', value: 5, top: 0 },
      { src: '/images/img2.png', value: 10, top: 0 },
      { src: '/images/img3.png', value: 20, top: 0 },
      { src: '/images/img4.png', value: 30, top: 0 }
    ],
    showPopup: true, // 控制弹窗显示
    energyNumber: 0,
    imageContainerHeight: 400, // 假设容器高度为400
    indicatordots: true, /* 加入图标指示点 */
    autoplay: false, /* 初始状态禁用自动轮播 */
    interval: 5000,   /* 切换时间属性1000=1秒 */  
    titleText: "果树正度过春天！",
    descText: "今天也是辛勤劳动的一天！",
    ctx: null,
    time_diff: 6000,
    hasClosedPopup: false, // 标记是否已关闭弹窗
  },

  // 关闭弹窗
  closePopup() {
    this.setData({
      showPopup: false,
      hasClosedPopup: true, // 标记弹窗已关闭
      autoplay: true, // 启用轮播图的自动播放
    });

    // 启动画圈动画
    this.startCircleAnimation();
  },

  // 启动画圈动画
  startCircleAnimation() {
    wx.createSelectorQuery().select('#runCanvas').boundingClientRect(rect => {
      console.log(rect);
      const w = rect.width / 2;
      const h = rect.height / 2;
      const radius = Math.min(w, h) - 8;
      this.setData({ ctx: wx.createCanvasContext('runCanvas') }); // 设置全局 ctx 变量
      this.canvasTap(0, 100, 190, w, h, 135);
    }).exec();
  },

  run(start, end, w, h, radius) {
    const ctx = this.data.ctx; // 获取全局 ctx 变量
    const num = (2 * Math.PI / 100 * start) - 0.5 * Math.PI;
    // 清除画布
    ctx.clearRect(0, 0, w * 2, h * 2);
    // 绘制圆环
    ctx.beginPath();
    ctx.arc(w, h, radius, -0.5 * Math.PI, num);
    ctx.setStrokeStyle("#CDCD69");
    ctx.setLineWidth(10);
    ctx.setLineCap("butt");
    ctx.stroke();
    // 绘制百分比数字
    ctx.beginPath();
    ctx.setFontSize(40);
    ctx.setFillStyle("rgba(0, 0, 0, 0)"); // 将文字颜色设置为透明
    ctx.setTextAlign("center");
    ctx.setTextBaseline("middle");
    ctx.fillText(start + "%", w, h);
    ctx.draw();
  },

  canvasTap(start, end, time, w, h, radius) {
    const that = this;
    start++;
    if (start > end) {
      return false;
    }
    that.run(start, end, w, h, radius); // 传入其他参数，不再传入 ctx
    setTimeout(function () {
      that.canvasTap(start, end, time, w, h, radius);
    }, 370);
  },

  swiperChange(event) {
    const current = event.detail.current;
    let titleText = "";

    if (current === 0) {
      titleText = "果树正度过立春！";
    } else if (current === 1) {
      titleText = "果树正度过谷雨！";
    } else if (current === 2) {
      titleText = "果树正度过小满！";
    } else if (current === 3) {
      titleText = "果树正度过夏至！";
    } else if (current === 4) {
      titleText = "果树正度过立秋！";
    } else if (current === 5) {
      titleText = "果树正度过秋分！";
    } else if (current === 6) {
      titleText = "果树正度过冬至！";
    } else if (current === 7) {
      titleText = "果树正度过大寒！";
    }

    this.setData({
      titleText: titleText
    });
  },

  changeDesc() {
    const descTexts = [
      "今天也是辛勤劳动的一天！",
      "你与果树共同成长！",
      "果树离成熟又进了一步！"
    ];

    const randomIndex = Math.floor(Math.random() * descTexts.length);
    const newDescText = descTexts[randomIndex];

    this.setData({
      descText: newDescText
    });
  },

  handleImageTap: function (e) {
    const index = e.currentTarget.dataset.index;
    const value = this.data.images[index].value;
    const energyNumber = this.data.energyNumber + value;

    // 更新能量值
    this.setData({
      energyNumber: energyNumber
    });

    // 隐藏被点击的图片
    const images = this.data.images;
    images[index].hidden = true;
    this.setData({
      images: images
    });

    // 启动能量球上下移动
    this.startEnergyBallVerticalMovement(index);
  },

  startEnergyBallVerticalMovement: function (index) {
    // 使用定时器周期性更新球体位置
    const speed = Math.random() * 2 + 1; // 速度在1到3之间随机
    setInterval(() => {
      const images = this.data.images;
      const direction = Math.random() > 0.5 ? 1 : -1; // 随机选择上移还是下移
      images[index].top += direction * speed;

      // 边界检查，确保在容器范围内
      if (images[index].top < 0) {
        images[index].top = 0;
      } else if (images[index].top > this.data.imageContainerHeight - 50) { // 假设每个球的高度为50
        images[index].top = this.data.imageContainerHeight - 50;
      }

      this.setData({
        images: images
      });
    }, 20); // 更新频率，单位为毫秒
  },
});